<template>
	<button v-on:click="run" :disabled="disabled || time > 0">{{ text }}</button>
	<!-- <button class="mini-btn" type="warn" size="mini" v-on:click="run" :disabled="disabled || time > 0">{{ text }}</button> -->
</template>
<script>
	export default{
		props: {
		    second: {
		        type: Number,
		        default: 60
		    },
		    
		    runText:{
		        type:String,
		        default:'s 后重获取'
		    },
		    startText:{
		        type:String,
		        default:'获取验证码'
		    }
		},
		data() {
		    return {
		        time: 0,
				disabled: false
		    }
		},
		methods: {
		    run() {
		        this.$emit('on-run');
		    },
		    start(){
		        this.disabled = true;
		        this.time = parseInt(this.second)+1;
		        this.timer();
		    },
		    stop(){
		        this.time = 0;
		        this.disabled = false;
		    },
		    timer () {
		        if (this.time > 0) {
		            this.time--;
		            setTimeout(this.timer, 1000);
		        }else{
		            this.disabled = false;
		        }
		    }
		
		},
		computed: {
		    text() {
		        return this.time >0 ? this.time + this.runText : this.startText;
		    }
		}
	}
</script>
<style lang="scss">
	button{
		width:160upx;
		height:60upx;
		color:#FFFFFF;
		line-height:60upx;
		background-color: #ff8d70;
		font-size:24upx;
		padding: 0;
	}
	
</style>

